<template>
	<view class="wallet">
		<u-navbar 
		:autoBack="true" 
		title="星豆明细" 
		:is-fixed="true"	
		:placeholder="true" 
		:border-bottom="false"	 
		:bgColor="background"></u-navbar>
		<view class="all-wallet">
			<view class="top">
				总收益
				<view class="a-price">{{performance.total.toFixed(2)}}</view>
				
			</view>
			<view class="bottom flex-box">
				<view class="b-l1 flex-box" @click="showTime=true">
					{{$f.handleAllTimeHmDay(value1)}}
					<u-icon v-if="!showTime" name="arrow-down" color="#D02227" size="20"></u-icon>
					<u-icon v-else name="arrow-up" color="#D02227" size="20"></u-icon>
				</view>
				<view class="b-l2">月收益：<text class="b-price">{{performance.month.toFixed(2)}}</text></view>
			</view>
		</view>
		<!-- 广告 -->
		<!-- <swiper class="swiper2" circular="true" :indicator-dots="false" :interval="8000" :autoplay="false">
			
			<swiper-item @tap="jumpType(item,key1)" :key="index">
				<image  class="v-banner" :src="comm_img_url+'/pro/mb-banner.png'" ></image>
			</swiper-item>
		</swiper> -->
		
		<view class="t-title">
			<view class="t-td">星豆互转</view>
			<view class="t-box flex-box">
				<view class="t-a1 box-1">
					<view class="left flex-box">
						<image class="ico" src="../../../static/img/bean.png" mode=""></image>
						<input class="uni-input box-1" type="number" v-model="tel" placeholder="请输入对方账号" />
					</view>
				</view>
				
				<view class="center">
					<u-icon name="arrow-rightward" color="#D02227" size="30"></u-icon>
				</view>
				
				<view class="t-a1 flex-box box-1">
					<view class="left  flex-box">
						<image class="ico" src="../../../static/img/bean.png" mode=""></image>
						<input class="uni-input box-1" type="number" v-model="num" placeholder="请输入互转数量" />
					</view>	
				</view>
			
			</view>
			<view class="flex-box" style="justify-content: space-between;margin-top:20rpx;">
				
				<view >星豆:<text class="font-weight">{{info.points}}</text></view>
			</view>
			<view class="cz-btn" @click="succClick">确认互转</view>
<!--			<view class="k-content">

				<text class="text2">注:10个星豆起转，单笔扣1个星豆费用，请核实对方账号后操作。</text>
			</view>-->
		</view>
		
		<view class="content">
			<view class="title flex-box">
				<view class="b1 box-1" @click="navClick(0)" :class="{'action':tab==0}">全部</view>
				<view class="b1 box-1" @click="navClick(1)" :class="{'action':tab==1}">转入</view>
				<view class="b1 box-1" @click="navClick(2)" :class="{'action':tab==2}">转出</view>
			</view>
			<view class="li flex-box" v-for="(item,index) in list" :key="item.id" v-if="list.length">
				<view class="left box-1">
					<view class="td">{{item.descr}}</view>
					<view class="time">{{item.create_time}}</view>
				</view>
				<view class="right bdd" v-if="item.num.indexOf('-')>=0">{{item.num}}</view>
				<view class="right add" v-else>{{item.num}}</view>
			</view>
			<view v-if="!list.length">
				<u-empty text="暂无数据" mode="data"></u-empty>
			</view>
		</view>
		<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="false" ref="numberPad"></number-jpan>
		  <u-datetime-picker
				:show="showTime"
				v-model="value1"
				mode="year-month"
				@confirm="timeSure"
				@cancel="showTime=false"
		></u-datetime-picker>
		<u-popup :show="wallet_mode_show" @close="close" :round="15" mode="bottom">
				<view class="flex-box wallet-mode">
					<image :src="newImgUrl+'/ico/icon-alipay.png'"  class="mode-alipay" @tap="goWalletPage(1)"></image>
					<u-line color="#999999" direction="col" length="64rpx"></u-line>
					<image :src="newImgUrl+'/ico/icon-bank.png'" class="mode-bank" @tap="goWalletPage(2)"></image>
				</view>
			</u-popup>
	</view>
</template>
<script>
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	export default {
		components:{
			numberJpan
		},
		data() {
			return {
				swiperList2:[],
				performance:{
					total:0,
					month:0,
				},
				 value1: Number(new Date()),
				showTime:false,
				comm_img_url:'',
				newImgUrl:'',//图片资源
				num:'',
				tel:'',
				info:{},
				tab:0,
				background:'transparent',
				page:1,
				totalPage:1,
				list:[],
				paytype:'wxpay',//支付类型
				notice:{
					isMore:false,
					isShow:false,
					title:'',
					content:'',
				},//显示通知
				wallet_mode_show:false,//打开提现方式
				
			};
		},
		
		onLoad() {
			this.comm_img_url = this.$c.appImg
			this.newImgUrl = this.$c.newImgUrl
			this.initData()
			this.getData()
			this.getPerformance()
			this.getHeng()
		},
		onReachBottom() {
		  console.log('onReachBottom');
		  let _this = this
		  if (this.page < this.totalPage) {
		    this.status = 'loading';
		    this.page++
		    setTimeout(() => {
		      _this.getData()
		    }, 1000)
		  } else {
		    this.status = 'nomore';
		  }
		},
		onPageScroll(res) {
			if (res.scrollTop > 100) {
				this.background = '#fff'
			} else {
				this.background = 'transparent'
			}
		},
		methods:{
			// 去升级
			upDateFun(){
				uni.navigateTo({
					url:`/pages/joinUs/index?classTab=2`
				})
			},
			//去提现页面
			goWalletPage(val){
				this.close()
				uni.navigateTo({
					url:`/pages/sub/wallet/withdrawal?status=${val}`
				})
			},
			//关闭提现弹窗
			close(){
				this.wallet_mode_show = false
			},
			jumpType(item,key) {
				
				uni.navigateTo({
					url: "/pages/sub/Bole/Bole?bole="+this.info.points
				})
				return false
				if (item.link_type == 1) {
					uni.navigateTo({
						url: "/pages/web-view/web-view?url=" + JSON.stringify(path)
					})
				} else if (item.link_type == 2) {
					uni.switchTab({
						url: path
					})
				} else if (item.link_type == 3) {
					uni.navigateTo({
						url: path
					})
				}
			},
			// 个人中心横幅
			getHeng(){
				this.$u.api.souceAds({type:4}).then(res => {
						if (res.status) {
							this.swiperList2 = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			getPerformance(){
				this.$u.api.memberMerits({time:parseInt(this.value1/1000)})
				.then(res=>{
					console.log(res.msg);
					if(res.status){
						this.performance = res.msg
					}
				})
				.catch(err=>{
					console.log(err);
					uni.showToast({
						icon: 'none',
						title: "网络异常，请稍后"
					})
				})
			},
			timeSure(item){
				console.log(item,'value')
				this.value1 = item.value
				this.getPerformance()
				this.showTime = false
			},
			showPassword(){
				this.$refs.numberPad.open()
			},
			closeChange(n) {
				let _this = this
				console.log(n,'提交')
				this.$u.api.points_transfer({
					tel:this.tel,
					num:this.num,
					pwd: n
				})
				.then(res=>{
					if(res.status){
						uni.showToast({
							title: '划转成功',
							icon: 'success',
							duration: 1500,
							success: function(){
								console.log('success')
								_this.initData()
								_this.getData()
								
								// _this.$f.jump('/pages/pay/succ',3)
							}
						});
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
				})
			},
			succClick(){
				if(!this.tel){
					uni.showToast({
						title:'请输入对方的账号',
						icon:'none'
					})
					return false;
				}
				if(!this.num){
					uni.showToast({
						title:'请输入正确的划转数量',
						icon:'none'
					})
					return false;
				}
				
				this.showPassword()
			},
			initData(){
				this.$u.api.points_transfer_rule()
				.then(res=>{
					console.log(res.msg);
					if(res.status){
						this.info = res.msg
						return 
					}
				})
				.catch(err=>{
					console.log(err);
					uni.showToast({
						icon: 'none',
						title: "网络异常，请稍后"
					})
				})
				
			},
			navClick(index){
				this.list = []
				this.tab = index
				this.page = 1
				this.getData()
			},
			getData(){
			  let data = {
			    tab:this.tab,
			    page:this.page
			  }
			  this.$u.api.points_record(data).then(res=>{
			    console.log(res);
			    if(res.status){
			      this.totalPage = res.msg.totalPage
			      
			
				 if(this.page == 1){
				   
				   this.list = res.msg.list
				 }else{
				   this.list = this.list.concat(res.msg.list)
				 }
			    
			      
			    }
			  })
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: linear-gradient(rgba(255,223,224,1) 0%, rgba(255,223,224,0.38) 20%, #F6F7FB 35%,#F6F7FB 100%);
		.swiper2{
			height:200rpx;
		}
		.v-banner{
			display: block;
			width:690rpx;
			height:200rpx;
			margin:0 auto;
			
		}
		padding-bottom:30rpx;
		.all-wallet{
			padding:30rpx;
			.top{
				color:#fff;
				padding:30rpx;
				background:linear-gradient(90deg,#D32B2F,#EA686B,#FE9DA0);
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				text-align: center;
				.a-price{
					font-size:48rpx;
					
				}
			}
			.bottom{
				padding:30rpx;
				justify-content: space-between;
				background:#fff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				.b-price{
					color:#D02227;
				}
			}
		}
		.k-content{
			text-align: left;
			.text1{
				font-size:30rpx;
				margin-right:10rpx;
				font-weight: bold;
			}
			.text2{
				font-size:24rpx;
				color:#888;
			}
		}
		.cz-btn{
			width:600rpx;
			height:80rpx;
			border-radius: 40rpx;
			text-align: center;
			color:#fff;
			background-color: #D02227;
			font-size:30rpx;
			line-height:80rpx;
			margin:30rpx auto;
		}
		.t-title{
			margin:0 auto;
			padding:0 30rpx;
			.t-td{
				font-size:32rpx;
				padding:20rpx 0;
				font-weight: bold;
			}
		}
		.t-box{
			// background-color: #fff;
			.left,.right{
				background:#fff;
				border-radius: 10rpx;
				padding:20rpx;
			}
			.center{
				margin:0 10rpx;
			}
			.ico{
				width:44rpx;
				height:45rpx;
				margin-right:10rpx;
			}
			.uni-input{
				font-size:26rpx;
			}
			.t-title{
				padding-bottom:10rpx;
			}
		}
		.content{
			background-color: #fff;
			width:700rpx;
			min-height:500rpx;
			border-radius: 20rpx;
			margin:0 auto;
			margin-top:30rpx;
			.title{
				padding:30rpx;
				text-align: center;
				border-bottom:1rpx solid #eee;
				.action{
					color:#D02227;
					font-weight: bold;
				}
			}
			.li{
				padding:30rpx;
				border-bottom:1rpx solid #eee;
				.left{
					.td{
						font-size:28rpx;
					}
					.time{
						font-size:24rpx;
						color:#888;
						margin-top:10rpx;
					}
				}
				.right{
					font-size:35rpx;
				}
				.add{
					color:#40c79f;
				}
				.bdd{
					color:#ff3d3d;
				}
			}
		}
	}
	.font-weight{
		font-weight: bold;
	}
	.notice{
		border-radius: 20rpx;
		background: #FFFAF2;
		padding:20rpx;
		margin:0 auto 20rpx !important;
		font-size:26rpx;
		.notice-sign{
			font-size:26rpx;
			.sign-tips{
				color:#FF798C;
			}
		}
		.notice-title{
			font-size:32rpx;
			color:#333;
			text-align: center;
			padding-top:60rpx;
			padding-bottom:40rpx;
		}
		.show-more{
			color:#00B4FF;
			flex-direction: column;
			justify-content: center;
		}
		.msg-text{
			text-indent: 30rpx;
			margin-bottom:40rpx ;
			line-height: 1.7;
		}
		.update-btn{
			width: 550rpx;
			margin:0 auto 10rpx;
		}
	}
	.wallet-mode{
		padding:80rpx 0;
		justify-content: space-around;
		.mode-bank{
			width:271rpx ;
			height:75rpx ;
			display: block;
			margin: 0 auto;
		}
		.mode-alipay{
			width: 225rpx;
			height: 79rpx;
			display: block;
			margin: 0 auto;
		}
	}
</style>
